<template>
  <div class="app-container">
    <div class="container ">
      <el-row :gutter="10" class="filter-container">
        <el-col :span="20">
          <el-button
            v-waves
            class="filter-item margin-left20"
            type="primary"
            size="mini"
            @click="submitForm('open')"
          >
            <i class="el-icon-circle-plus-outline" />&nbsp;新增
          </el-button>
        </el-col>
        <el-col :span="4">
          <el-input
            v-model="listQuery.search"
            placeholder="请输入用户名"
            size="mini"
          >
            <i slot="suffix" class="el-input__icon el-icon-search" @click="getList" />
          </el-input>
        </el-col>
      </el-row>
      <div>
        <!-- 删除资产 -->
        <el-dialog
          title="删除资产"
          :visible.sync="delUserdialogV"
          width="25%"
          center
        >
          <div class="text-algin-center">
            <el-avatar :size="60" src="../../assets/icons_slices/img_opo_tip.png">
              <img src="../../assets/icons_slices/img_opo_tip.png">
            </el-avatar>
            <h3>确定删除吗？</h3>
            <span>删除后不可恢复</span>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="danger" size="mini" @click="handleDelete('do')">删除</el-button>
            <el-button size="mini" @click="delUserdialogV = false">取 消</el-button>
          </span>
        </el-dialog>
        <!-- 回收资产 -->
        <el-dialog
          title="删除资产"
          :visible.sync="recUserdialogV"
          width="25%"
          center
        >
          <div class="text-algin-center">
            <el-avatar :size="60" src="../../assets/icons_slices/img_opo_tip.png">
              <img src="../../assets/icons_slices/img_opo_tip.png">
            </el-avatar>
            <h3>确定删除资产吗？</h3>
            <!-- <span>回收后已授权软件将不用</span> -->
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="danger" size="mini" @click="handleRecover('do')">删除</el-button>
            <el-button size="mini" @click="recUserdialogV = false">取 消</el-button>
          </span>
        </el-dialog>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        type="index"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="序号">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column label="用户名" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.userName }}
          </template>
        </el-table-column>
        <el-table-column label="用户电话" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.userPhone }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="设备名称" width="200px">
          <template slot-scope="scope">
            {{ scope.row.deviceName }}
          </template>
        </el-table-column>
        <el-table-column label="制造商" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.manufacturer }}
          </template>
        </el-table-column>
        <el-table-column label="设备型号" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.version }}
          </template>
        </el-table-column>
        <el-table-column label="用途" align="center">
          <template slot-scope="scope">
            {{ scope.row.purpose }}
          </template>
        </el-table-column>
        <el-table-column label="设备状态" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.state ==1 ?'在线':scope.row.state ==2 ? '离线':'无' }}
          </template>
        </el-table-column>
        <el-table-column label="设备ip" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.bindIp }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="登录方式" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.softName }}
          </template>
        </el-table-column> -->
        <el-table-column label="设备位置" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.address }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="采购时间" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.softName }}
          </template>
        </el-table-column> -->
        <el-table-column label="质保期" align="center">
          <template slot-scope="scope">
            {{ scope.row.warrantyPeriod }}
          </template>
        </el-table-column>
        <el-table-column label="技术负责人" align="center" width="120px">
          <template slot-scope="scope">
            {{ scope.row.technicianName }}
          </template>
        </el-table-column>
        <el-table-column label="责任人" align="center">
          <template slot-scope="scope">
            {{ scope.row.personLiableName }}
          </template>
        </el-table-column>
        <el-table-column label="责任人电话" align="center" width="120px">
          <template slot-scope="scope">
            {{ scope.row.personLiablePhone }}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.remark }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="200"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="handleRecover(scope.$index, scope.row)"
            >删除</el-button>
            <!-- <el-button
              type="danger"
              size="mini"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>
    <!-- 添加用户弹框 -->
    <el-dialog
      :title="titleStatus"
      :visible.sync="addUserdialogV"
      width="80%"
      :before-close="handleClose"
      center
    >
      <el-form
        ref="ruleForm"
        :rules="rules"
        label-width="120px"
        size="mini"
        :inline="true"
        :model="formAddUser"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="用户名:" prop="userName">
              <el-input v-model="formAddUser.userName" :disabled="isUserEdit || isUserEdit == null || editPassword" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备名称:" prop="userName">
              <el-input v-model="formAddUser.deviceName" :disabled="isUserEdit || isUserEdit == null || editPassword" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="制造商:" prop="userName">
              <el-input v-model="formAddUser.manufacturer" :disabled="isUserEdit || isUserEdit == null || editPassword" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备型号:" prop="userName">
              <el-input v-model="formAddUser.version" :disabled="isUserEdit || isUserEdit == null || editPassword" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备位置:" prop="userName">
              <el-input v-model="formAddUser.address" :disabled="isUserEdit || isUserEdit == null || editPassword" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="(!isUserEdit && isUserEdit !=null) || editPassword" label="用途:">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item v-if="(!isUserEdit && isUserEdit !=null) || editPassword" label="登录方式:" prop="password">
              <el-select v-model="value2" placeholder="请选择">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="技术负责人:" prop="userName">
              <el-input v-model="formAddUser.technicianName" :disabled="isUserEdit || isUserEdit == null || editPassword" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="责任人:" prop="userName">
              <el-input v-model="formAddUser.personLiableName" :disabled="isUserEdit || isUserEdit == null || editPassword" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="责任人电话:">
              <el-input v-model="formAddUser.personLiablePhone" :disabled="isUserEdit || isUserEdit == null || editPassword" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="8">
            <el-form-item v-if="(!isUserEdit && isUserEdit !=null) || editPassword" label="采购时间:" prop="password">
              <div class="block">
                <el-date-picker
                  v-model="datevalue1"
                  style="width:85%"
                  type="datetime"
                  placeholder="选择日期时间"
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="(!isUserEdit && isUserEdit !=null) || editPassword" label="质保期:" prop="password">
              <el-select v-model="value1" placeholder="请选择">
                <el-option
                  v-for="item in options1"
                  :key="item.value1"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="(!isUserEdit && isUserEdit !=null) || editPassword" label="用途:" prop="password">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="8">
            <el-form-item
              v-if="!isUserEdit && !editPassword"
              v-model="formAddUser.state"
              label="设备状态:"
              prop="userName"
            >
              <el-radio v-model="formAddUser.state" :label="1">在线</el-radio>
              <el-radio v-model="formAddUser.state" :label="2">离线</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitForm('ruleForm')">确 定</el-button>
        <el-button size="mini" @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { hardwarePage, hardwareAdd, hardwareDel, hardwarePut } from '@/api/assetSoft'
import Pagination from '@/components/Pagination'
import { userList, userAdd
  , userDel, userPut, userPermission, userPasswordPut } from '@/api/user'
export default {
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      cacheId: null,
      recUserdialogV: false,
      datevalue2: null,
      datevalue1: null,
      isUserEdit: false,
      titleStatus: '添加资产',
      rules: {
        userName: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          { min: 2, max: 16, message: '长度在 6 到 16个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '手机号长度不对', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          { min: 2, max: 25, message: '长度在 6 到 25 个字符', trigger: 'blur' }
        ]
      },
      formAddUser: {
        'createTime': '',
        'personLiableName': '',
        'personLiablePhone': '',
        'remark': '',
        'secretId': '',
        'secretKey': '',
        'softId': '',
        'softName': '',
        'technicianName': '',
        'technicianPhone': '',
        'type': 0,
        'updateTime': '',
        'userId': '',
        'userName': '',
        'userPhone': '',
        'version': ''
      },
      addUserdialogV: false,
      delUserdialogV: false,
      value1: '1',
      value2: '1',
      total: 10,
      list: [{
        name: 'zhang'
      }],
      listLoading: false,
      listQuery: {
        search: '',
        page: 1,
        limit: 10
      },
      options: [{
        value: '1',
        label: '办公'
      }, {
        value: '2',
        label: '沟通'
      }],
      options1: [{
        value: '1',
        label: '6年'
      }, {
        value: '2',
        label: '9年'
      }],
      options2: [{
        value: '1',
        label: '账号密码'
      }, {
        value: '2',
        label: '关联登录'
      }],
      editPassword: false,
      value: '1'
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    initData() {
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.clearValidate()
      }
      this.formAddUser = {
        'createTime': '',
        'personLiableName': '',
        'personLiablePhone': '',
        'remark': '',
        'secretId': '',
        'secretKey': '',
        'softId': '',
        'softName': '',
        'technicianName': '',
        'technicianPhone': '',
        'type': 0,
        'updateTime': '',
        'userId': '',
        'userName': '',
        'userPhone': '',
        'version': ''
      }
    },
    handleClose(params) {
      this.getList()
      this.initData()
      this.addUserdialogV = false
    },
    submitForm(formName, editPassword) {
      if (formName === 'open') {
        this.initData()
        this.titleStatus = '添加资产'
        this.formAddUser.userName = ''
        this.formAddUser.phone = ''
        this.addUserdialogV = true
        this.formAddUser.id = ''
        this.isUserEdit = false
      } else {
        if (this.formAddUser.id !== '') {
          this.$refs['ruleForm'].validate((valid) => {
            if (valid) {
              hardwarePut(this.formAddUser).then(res => {
                if (res.code === 200) {
                  this.imageUrl = ''
                  this.addUserdialogV = false
                  this.initData()
                  this.getList()
                }
              })
            }
          })
        } else {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              hardwareAdd(this.formAddUser).then(res => {
                if (res.code === 200) {
                  this.addUserdialogV = false
                  this.initData()
                  this.getList()
                }
              })
              // alert('submit!')
            } else {
              return false
            }
          })
        }
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleEdit(index, row) {
      this.titleStatus = '修改资产'
      this.addUserdialogV = true
      this.formAddUser = row
    },
    handleRecover(index, row) {
      if (index == 'do') {
        this.$confirm('确定删除吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          hardwareDel(
            {
              ids: this.cacheId
            }
          ).then(res => {
            if (res.code == 200) {
              this.recUserdialogV = false
              this.$message.success('删除成功')
              this.getList()
            }
          })
        }).catch(() => {
          this.$message.info('已点击取消')
        })
      } else {
        this.recUserdialogV = true
        this.cacheId = row.id
      }
    },
    handleDelete(index, row) {
      if (index === 'do') {
        this.$confirm('确定删除吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          hardwareDel(
            {
              id: this.cacheId
            }
          ).then(res => {
            if (res.code === 200) {
              this.recUserdialogV = false
              this.$message.success('删除成功')
              this.getList()
            }
          })
        }).catch(() => {
          this.$message.info('已点击取消')
        })
      } else {
        this.recUserdialogV = true
        this.cacheId = row.id
      }
    },
    getList() {
      this.listLoading = false
      hardwarePage(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.totalCount
        this.listLoading = false
      })
    },
    fetchData() {
      this.getList()
    }
  }
}
</script>
<style>
  .filter-container{
    margin-bottom: 20px;
  }
</style>
<style scoped>
  .text-algin-center {
    text-align: center;
  }
  .container {
    padding: 25px 20px 20px 20px !important;
  }
</style>
